<template>
  <div>
    <div class="songerdetail" v-if="!sh">
      <i
        class="back iconfont icon-31fanhui1"
        @click="$router.back()">
      </i>
      <SongerDetailHead class="head" :songermsg="songermsg"></SongerDetailHead>
      <SongerIndex class="detail" :songermsg="songermsg"></SongerIndex>
      <h1>热门单曲</h1>
      <ul class="songerul">
        <RecomItem
          v-for="(item, index) in songerHotList"
          :index="index + 1"
          @click.native="
            $emit('update:currentSong', item),
              $emit('update:playlist', songerHotList)
          "
          :key="item.id"
          :item="item"
          :currentSong="currentSong"
          :playing="playing"
        ></RecomItem>
      </ul>
      <div class="footbox">
        <div class="foot">
          <i class="fonticon iconfont icon-yinle1"></i>下载热门歌曲
        </div>
      </div>
    </div>
    <loadingView v-if="sh"></loadingView>
  </div>
</template>

<script>
import SongerIndex from "@/components/SongerIndex.vue";
import SongerDetailHead from "@/components/SongerDetailHead.vue";
import RecomItem from "@/components/RecomItem.vue";
import loadingView from "@/components/LoadingView.vue";
export default {
  props: {
    songermsg: Object,
    currentSong: Object,
    playing: Boolean,
  },
  components: {
    SongerIndex,
    SongerDetailHead,
    RecomItem,
    loadingView,
  },
  data: function () {
    return {
      songerHotList: [],
      sh:true,
    };
  },
  watch: {
    songermsg: function () {
      this.axios
        .get(
          `"https://apis.netstart.cn/music/artist/top/song?id=${this.songermsg.artist.id}"`
        )
        .then((res) => {
          this.songerHotList = res.data.songs.splice(0, 10);
        });
    },
  },
  created: function () {
    this.axios
      .get(
        "https://apis.netstart.cn/music/artist/top/song?id=" +
          this.songermsg.artist.id
      )
      .then((res) => {
        this.songerHotList = res.data.songs.splice(0, 10);
        setTimeout(()=>{this.sh=false},100)
      });
  },
};
</script>

<style lang="less" scoped>
.songerdetail {
  width: 100vw;
  background-color: #fff;
  color: white;
  z-index: 10;
  position: relative;
  .back {
    position: absolute;
    top: 6px;
    left: 6px;
    width: 25px;
    height: 25px;
    font-size: 20px;
    z-index: 2;
  }
  .head {
    z-index: 20;
  }
  .detail {
    z-index: 20;
  }
  h1 {
    font-size: 18px;
    padding: 15px;
    background: #fff;
    font-weight: 700;
    margin-top: 5px;
    color: #393333;
  }
  .songerul {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    margin-bottom: 45px;
    .songlist {
      width: 90%;
      color: #999999;
    }
  }
  .footbox {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    border-top: 1px solid #ccc;
    background-color: #fff;
    .foot {
      width: 60%;
      height: 44px;
      border-radius: 44px;
      color: white;
      font-size: 18px;
      background-color: #ff3a3a;
      display: flex;
      justify-content: center;
      align-items: center;
      .fonticon {
        font-size: 30px;
      }
    }
  }
}
</style>